<template>
  <div class="browsing-history-page bg-gray-100 min-h-screen p-4">
    <div v-if="loading" class="text-center py-4">
      <div class="text-center py-4">加载中...</div>
    </div>
    <div v-else-if="browsingHistory.length === 0" class="text-center py-4">
      <div class="text-center py-4">暂无浏览记录</div>
    </div>
    <div v-else class="space-y-4">
      <div v-for="(item, index) in browsingHistory" :key="index" class="bg-white rounded-lg shadow p-4">
        <div class="flex justify-between items-start">
          <div class="flex-1">
            <div class="text-sm text-gray-500">浏览时间</div>
            <div class="text-base font-medium text-gray-800">{{ formatDate(item.viewTime) }}</div>
          </div>
        </div>
        <div class="mt-4 border-t pt-4">
          <div class="flex items-center mb-2">
            <div class="text-lg font-semibold">{{ item.servicePerson.name }}</div>
            <div class="ml-2 text-yellow-500">
              <nut-rate v-model="item.servicePerson.rating" readonly size="small" />
            </div>
          </div>
          <div class="grid grid-cols-2 gap-2 text-sm">
            <div>
              <span class="text-gray-500">服务类型：</span>
              <span>{{ item.servicePerson.serviceType }}</span>
            </div>
            <div>
              <span class="text-gray-500">服务内容：</span>
              <span>{{ item.servicePerson.serviceContent }}</span>
            </div>
            <div>
              <span class="text-gray-500">服务费用：</span>
              <span>¥{{ item.servicePerson.serviceFee }}/次</span>
            </div>
            <div>
              <span class="text-gray-500">所在地区：</span>
              <span>{{ item.servicePerson.address }}</span>
            </div>
            <div>
              <span class="text-gray-500">接单量：</span>
              <span>{{ item.servicePerson.totalOrders }}单</span>
            </div>
          </div>
        </div>
        <div class="mt-4 flex justify-end">
          <nut-button type="primary" size="small" @click="makeAppointment(item)">立即预约</nut-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getCustomerHistory } from "@/api/customer";

// 定义历史记录项的接口
interface ServicePerson {
  id: number;
  name: string;
  serviceType: string;
  serviceContent: string;
  serviceFee: number;
  rating: number;
  address: string;
  totalOrders: number;
  goodReviewRate: number;
  phoneNumber: string;
  photoPath: string | null;
  status: string;
  ordersLast3m: number;
  ordersLastYear: number;
  createTime: string;
}

interface HistoryItem {
  viewTime: string;
  servicePerson: ServicePerson;
}

// 定义API响应接口
interface ApiResponse {
  code: number;
  msg: string;
  data: HistoryItem[];
}

const browsingHistory = ref<HistoryItem[]>([]);
const loading = ref(true);

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString);
  return date.toLocaleString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  });
};

// 立即预约
const makeAppointment = (item: HistoryItem) => {
  uni.switchTab({
    // 跳转到发布页面，并携带 servicePersonId 参数
    url: `/pages/modules/user/release/index?servicePersonId=${item.servicePerson.id}`,
  });
};

onMounted(async () => {
  try {
    const customerId = uni.getStorageSync("userId");
    const response = (await getCustomerHistory(customerId)) as ApiResponse;
    if (response.code === 200) {
      browsingHistory.value = response.data;
    } else {
      uni.showToast({
        title: response.msg || "获取浏览记录失败",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("获取浏览记录时出错:", error);
    uni.showToast({
      title: "获取浏览记录失败",
      icon: "none",
    });
  } finally {
    loading.value = false;
  }
});
</script>

<style lang="scss" scoped>
.browsing-history-page {
  .nut-button {
    min-width: 80px;
  }
}
</style>
